<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<style>
*{
	margin: 0;
	padding: 0;
}
 .carousel-wrap {
   height: 310px;
   width: 100%;
   overflow: hidden;
   background-color: #fff;
}

.slide-ul {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide-ul li {
  list-style-type:none;
  position: absolute;
  width: 100%;
  height: 100%;
}

.imagese {
  width: 1920px;
  height: 310px;
  position: absolute;
}

.carousel-items {
  position: absolute;
  z-index: 10;
  top: 470px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
}

.carousel-items span {
  display: inline-block;
  height: 6px;
  width: 30px;
  margin: 0 3px;
  background-color: #b2b2b2;
  cursor: pointer;
}
.carousel-items .active {
  background-color: orange;
}

.list-enter-to {
  transition: all 1s ease;
  transform: translateX(0);
}

.list-leave-active {
  transition: all 1s ease;
  transform: translateX(-100%)
}

.list-enter {
  transform: translateX(100%)
}

.list-leave {
  transform: translateX(0)
}
</style>
<!--yeah-slider.html 轮播可分离-开始-->


<div class="carousel-wrap" id="carousel" >
    <transition-group tag="ul" class='slide-ul' name="list">
        <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
            <a v-bind:href="list.lblink" >
                <img :src="list.lbimage" :alt="list.lbname" class="imagese">
            </a>
        </li>
    </transition-group>
    <div class="carousel-items">
        <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
    </div>
</div>
<script>
	
	var a = $("#carousel").width();
	var b = -(1920-a)/2 ;
	
	$(".imagese").css("left", b+"px");

    $(function () {
    	$.post("LunBoInfo",{lbpagename:2},function(data){
       		var v1 = new Vue({
       		    el: '#carousel',
       		    data: {
       		        slideList: data ,
       		        currentIndex: 0,
       		        timer: ''
       		    },
       		    methods: {
       		        go() {
       		            this.timer = setInterval(() => {
       		                this.autoPlay()
       		            }, 4000)
       		        },
       		        stop() {
       		            clearInterval(this.timer)
       		            this.timer = null
       		        },
       		        change(index) {
       		            this.currentIndex = index
       		        },
       		        autoPlay() {
       		            this.currentIndex++
       		            if (this.currentIndex > this.slideList.length - 1) {
       		                this.currentIndex = 0
       		            }
       		        }
       		    },
       		    created() {
       		        this.$nextTick(() => {
       		            this.timer = setInterval(() => {
       		                this.autoPlay()
       		            }, 4000)
       		        })
       		    }
       		}) 
       	},"json");
    });
</script>

<!--yeah-slider.html 轮播可分离-结束-->